<!-- sku管理 - 综合表单页面 -->
<template>
  <div class="page-container">
    <page_breadcrumb :getKeyMethod="init_table_model" @change="change_table_model" pageOption />
    <ex_super_table_page v-bind="option" ref="SuperTablePage" @selection-change="e => selection = e">
    </ex_super_table_page>
    <ex_super_dialog_form ref="editPackDialog" v-bind="editPackDialog" @afterSubmitSuccess="reload()">
    </ex_super_dialog_form>

    <print_sku ref="print_sku" itemKey="id" />

  </div>
</template>
<script>
import pack_material_cascader from '@/component/wms/pack_material_cascader.vue';
import pack_material_input from '@/component/wms/pack_material_input.vue';

import print_sku from '@/component/print/print_sku'
import superTablePageFunction from '@/mixin/super-table-page-function';
import page_table_model_manage from '@/mixin/page_table_model_manage';

import emitOnFunction from '@/mixin/emit-on-function';
let emitKey = 'wms>sku_manage'

export default {
  title: 'label_sku_manage',
  mixins: [superTablePageFunction, emitOnFunction(emitKey), page_table_model_manage],
  components: { print_sku, pack_material_cascader, pack_material_input, },
  data() {
    return {
      selection: [],
      option: {
        search: {
          model: [
            { label: "label_keyword", key: "keyword", type: 'input', attrs: { placeholder: '名称 / 条码 / 编码', }, },
            { label: "label_customer", key: "customerId", type: 'common_customer_choose', },
          ],
        },

        actionExtra: [
          {
            label: 'label_print_barcode', attrs: { type: "primary" }, click: (row) => {
              if (_.isEmpty(this.selection)) {
                return this.$message.error(this.$tt('tip_please_select_order'))
              }
              this.print(this.selection)
            }
          },
        ],
        table: {
          url: "/wms-api/sku/WmsSkuInfoRpc/selectSkuPage.json",

          model: this.init_table_model(),
        },

      },
      editPackDialog: {
        customClass: 'dialog_auto',
        submitUrl: '/wms-api/sku/WarehouseSkuRequirementRpc/saveUpdate.json',
        detailUrl: '/wms-api/sku/WarehouseSkuRequirementRpc/selectWmsSkuRequirement.json',
        form: {
          itemClass: "form_item_default", inputClass: "form_input_default",
          default: {
            comeInProcessRequirement: {},
            logisticsPackageRequirement: {},
          },
          model: [
            { header: "label_come_in_process", },

            { key: 'comeInProcessRequirement.isComeInProcess', label: 'label_is_come_in_process', type: "select", enum: 'YesOrNoEnum' },
            { key: 'comeInProcessRequirement.skuPackageDifficulty', label: 'label_process_difficulty', type: "select", enum: 'WmsSkuPackageDifficultyEnum' },
            {
              key: 'comeInProcessRequirement.comeInPackMaterialList', label: 'label_come_in_pack_meterial',
              render: (h, { data, item }) => {
                const list = data.comeInProcessRequirement && data.comeInProcessRequirement.comeInPackMaterialList ? data.comeInProcessRequirement.comeInPackMaterialList : []

                const addClick = () => {
                  if (!data.comeInProcessRequirement.comeInPackMaterialList) {
                    this.$set(data.comeInProcessRequirement, 'comeInPackMaterialList', [])
                  }
                  data.comeInProcessRequirement.comeInPackMaterialList.push({ packMaterialNum: 1 })
                }
                const removeClick = (it, i) => {
                  data.comeInProcessRequirement.comeInPackMaterialList.splice(i, 1)
                }
                const listRender = list.map((item, index) => {
                  const value = item.packMaterialId
                  const count = item.packMaterialNum

                  return h("div", { class: "flex_row_center" }, [
                    h(pack_material_input, {
                      class: "form_input_small",
                      props: {
                        value: value,
                      },
                      on: {
                        changeItem: e => {
                          this.$set(item, 'packMaterialId', e.id)
                          this.$set(item, 'packMaterialName', e.name)
                          this.$set(item, 'packMaterialCode', e.code)
                        }
                      }
                    }),
                    h('el-input-number', {
                      class: "form_input_mini mg_h1",
                      props: {
                        value: count, min: 1, max: 10, 'step-strictly': true,
                      },
                      on: {
                        input: e => {
                          this.$set(item, 'packMaterialNum', e)
                        }
                      }
                    }),
                    h('el-button', { class: "button_text_danger", props: { type: "text", }, on: { click: () => { removeClick(item, index) } } }, [this.$t('label_remove')])
                  ])
                })
                return (<div>
                  <div ><el-button type="text" onClick={addClick} >{this.$t('label_add')}</el-button></div>
                  {listRender}
                </div>)
              }
            },
            // {
            //   key: 'comeInProcessRequirement.comeInPackMaterialNum', label: '来货加工包材数量', type: "input-number",
            //   attrs: { min: 1, 'step-strictly': true, }
            // },
            { header: "label_logistics_process_requirement", },

            { key: 'logisticsPackageRequirement.isLogisticsPackage', label: 'label_is_logistics_send_pack', type: "select", enum: 'YesOrNoEnum' },
            {
              key: 'logisticsPackageRequirement.logisticsPackMaterialList', label: 'label_logistics_pack_meterial',
              render: (h, { data, item }) => {
                const list = data.logisticsPackageRequirement && data.logisticsPackageRequirement.logisticsPackMaterialList ? data.logisticsPackageRequirement.logisticsPackMaterialList : []

                const addClick = () => {
                  if (!data.logisticsPackageRequirement.logisticsPackMaterialList) {
                    this.$set(data.logisticsPackageRequirement, 'logisticsPackMaterialList', [])
                  }
                  data.logisticsPackageRequirement.logisticsPackMaterialList.push({ packMaterialNum: 1 })
                }
                const removeClick = (it, i) => {
                  data.logisticsPackageRequirement.logisticsPackMaterialList.splice(i, 1)
                }
                const listRender = list.map((item, index) => {
                  const value = item.packMaterialId
                  const count = item.packMaterialNum

                  return h("div", { class: "flex_row_center" }, [
                    h(pack_material_input, {
                      class: "form_input_small",
                      props: {
                        value: value,
                      },
                      on: {
                        changeItem: e => {
                          this.$set(item, 'packMaterialId', e.id)
                          this.$set(item, 'packMaterialName', e.name)
                          this.$set(item, 'packMaterialCode', e.code)
                        }
                      }
                    }),
                    h('el-input-number', {
                      class: "form_input_mini mg_h1",
                      props: {
                        value: count, min: 1, max: 10, 'step-strictly': true,
                      },
                      on: {
                        input: e => {
                          this.$set(item, 'packMaterialNum', e)
                        }
                      }
                    }),
                    h('el-button', { class: "button_text_danger", props: { type: "text", }, on: { click: () => { removeClick(item, index) } } }, [this.$t('label_remove')])
                  ])
                })
                return (<div>
                  <div ><el-button type="text" onClick={addClick} >{this.$t('label_add')}</el-button></div>
                  {listRender}
                </div>)
              }
            },
          ],
          rules: {
            'comeInProcessRequirement.comeInPackMaterialList': [{
              type: "array", trigger: 'change',
              validator: (r, v, cb) => {
                if (v && v.some(it => !it.packMaterialId)) {
                  return cb(this.$tt('tip_type_can_no_empty', { i18n: true, type: "label_come_in_pack_meterial" }))
                }
                cb()
              }
            }],
            'logisticsPackageRequirement.logisticsPackMaterialList': [{
              type: "array", trigger: 'change',
              validator: (r, v, cb) => {
                if (v && v.some(it => !it.packMaterialId)) {
                  return cb(this.$tt('tip_type_can_no_empty', { i18n: true, type: "label_logistics_pack_meterial" }))
                }
                cb()
              }
            }],
            // 'comeInProcessRequirement.skuPackageDifficulty': [{ required: true, message: this.$tt('tip_can_no_empty'), trigger: 'change' }],
            // 'comeInProcessRequirement.comeInPackMaterialId': [{ required: true, message: this.$tt('tip_can_no_empty'), trigger: 'change' }],
            // 'comeInProcessRequirement.comeInPackMaterialNum': [{ required: true, type: "number", min: 1, message: this.$tt('tip_can_no_empty'), trigger: 'change' }],
            // 'comeInProcessRequirement.isComeInProcess': [{ required: true, message: this.$tt('tip_can_no_empty'), trigger: 'change' }],
            // 'comeInProcessRequirement.skuPackageDifficulty': [{ required: true, message: this.$tt('tip_can_no_empty'), trigger: 'change' }],
            // 'comeInProcessRequirement.comeInPackMaterialId': [{ required: true, message: this.$tt('tip_can_no_empty'), trigger: 'change' }],
            // 'comeInProcessRequirement.comeInPackMaterialNum': [{ required: true, type: "number", min: 1, message: this.$tt('tip_can_no_empty'), trigger: 'change' }],

          },
        }
      },

    };
  },
  methods: {


    option_table_model() {
      return [
        { type: 'selection', clickToggle: true, keyGroup: 'label_table_operate' },
        {
          type: 'expandDesc', 'width': 80,
          expandDesc: {
            class: "desc_flex_row",
            column: 4, border: true, direction: 'vertical', labelClassName: 'flex_cell', contentClassName: 'flex_cell',
            model: [],
          },
        },
        {
          key: 'customerName', label: 'label_customer_info', 'min-width': 180, 'show-overflow-tooltip': true, keyShow: 'expandDesc',
          attrs: {
            formatter: (r, c, v, i) => this.$formatNameCode(v, r.customerCode)
          }
        },
        {
          key: 'skuOnlyCode', label: 'label_sku_only_code', 'min-width': 180,

          render: (h, { row, column }) => {
            const code = row[column.property]
            if (!code) return this.$tt('data_temp_none')
            return (<text_extra_tooltip_operate extra_barcode_image extra_text_align='center'
              value={code}
              data_type={column.property} data_id={row.id}
            />)
          },
        },
        { key: 'skuBarcode', label: 'label_sku_code', 'min-width': 150, 'show-overflow-tooltip': true, },

        { key: 'skuName', label: 'label_sku_name', 'show-overflow-tooltip': true, },

        {
          key: 'isElectrify', label: 'label_is_electrify', 'show-overflow-tooltip': true, keyShow: 'expandDesc',
          formatter: (r, c, v, i) => this.$enumShow(v, 'YesOrNoEnum')
        },
        {
          key: 'isCertificate', label: 'label_is_upload_certificate', 'show-overflow-tooltip': true, keyShow: 'expandDesc',
          formatter: (r, c, v, i) => this.$enumShow(v, 'YesOrNoEnum')
        },
        {
          key: 'skuDeclaredValue', label: 'label_declared_value', 'width': 140, 'show-overflow-tooltip': true,
          formatter: (r, c, v, i) => this.$formatNameCode(v, r.currencyCode)
        },
        {
          key: 'categList', label: 'label_belong_category', 'width': 240, 'show-overflow-tooltip': true,
          formatter: (r, c, v, i) => v ? v.map(it => it.categoryName).join(" → ") : this.$tt("data_none")
        },
        { key: 'skuWeight', label: 'label_weight_unit', 'show-overflow-tooltip': true, keyShow: 'expandDesc', },
        {
          key: 'skuLength', label: 'label_length_unit', 'show-overflow-tooltip': true, keyShow: 'expandDesc',
        },
        {
          key: 'skuWidth', label: 'label_width_unit', 'show-overflow-tooltip': true, keyShow: 'expandDesc',
        },
        {
          key: 'skuHeight', label: 'label_height_unit', 'show-overflow-tooltip': true, keyShow: 'expandDesc',
        },
        {
          key: 'skuStatus', label: 'label_status', 'width': 140, 'show-overflow-tooltip': true,
          formatter: (r, c, v, i) => this.$enumShow(v, 'SkuStatusEnum')
        },
        {
          type: 'operate', width: 210, operate: [

            { label: 'label_view_detail', click: (row) => this.clickDetail(row) },
            {
              label: "label_pack_quality_inspection", click: (row) =>
                this.$refs.editPackDialog.showNew({
                  title: this.$t("label_pack_quality_inspection"),
                  data: {
                    skuId: row.id,
                    skuOnlyCode: row.skuOnlyCode,
                    customerId: row.customerId,
                    customerCode: row.customerCode,
                    comeInProcessRequirement: {},
                    logisticsPackageRequirement: {},
                  },
                  params: { skuId: row.id },
                })
            },
            { label: "label_print_barcode", click: (row) => this.print([row], { single: true  }) },
          ],
        }
      ]
    },
    print(rows,option) {
      this.$refs.print_sku.show(rows,option)
    },
    clickDetail(row) {
      this.$router.push({ path: '/page/wms/base/sku_detail', query: { id: row.id, emitKey } })
    },
  }
};

</script>
<style></style>
